<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 绑定监听 -->
    <button @click="test">事件对象</button>
    <button @click="test2(1,$event)">事件对象</button>
    <!-- 事件修饰符 -->
    <div style="width:200px;height:200px;background-color:red;" @click="clickOut">
      out
      <!-- click.stop vue阻止冒泡 -->
      <div style="width:100px;height:100px;background-color:blue;" @click.stop="clickIn">in</div>
      <!-- click.prevent vue阻止默认事件 -->
      <a href="http://www.baidu.com" @click.prevent.stop="gotoBaidu">去百度</a>
    </div>
    <!-- 按键修饰符 -->
    <input type="text" @keyup.enter="showText">
    <!-- 表单收集 -->
    <form action="/xx" @submit.prevent="submit">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="userInfo.username"><br>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="userInfo.password"><br>
      <span>性别：</span>
      <input type="radio" id="female" value="女" v-model="userInfo.gender">
      <label for="female">女</label>
      <input type="radio" id="male" value="男" v-model="userInfo.gender">
      <label for="male">男</label><br>
      <span>爱好：</span>
      <input type="checkbox" id="basketball" value="篮球" v-model="userInfo.hobby">
      <label for="basketball">
        篮球
      </label>
      <input type="checkbox" id="game" value="游戏" v-model="userInfo.hobby">
      <label for="game">
        游戏
      </label>
      <input type="checkbox" id="sleep" value="睡觉" v-model="userInfo.hobby">
      <label for="sleep">
        睡觉
      </label><br>
      <label for="city">城市</label>
      <select id="city" v-model="userInfo.city">
        <option  v-for="(item, index) in allCities" :value="item.name">{{item.name}}</option>
      </select>
      <button type="submit">提交</button>
    </form>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        userInfo: {
          gender:'女',
          hobby: []
        },
        allCities: [
          {id:1, name:'北京'},
          {id:2, name:'上海'},
          {id:3, name:'深圳'},
        ]
      },
      methods: {
        test(event) {
          console.log(event)
        },
        test2(val, event) {
          console.log(val, event)
        },
        clickOut() {
          console.log('out事件')
        },
        clickIn(event) {
          console.log('in事件')
          // 先后输出 in out 向外冒泡
          // js阻止冒泡
          // event.stopPropagation();
        },
        gotoBaidu(event) {
          // js阻止默认行为
          // event.preventDefault();
        },
        showText(event) {
          // js实现
          // if (event.keyCode === 13) {
          //   console.log(event.target.value)
          // }
          console.log(event.target.value)
        },
        submit() {
          console.log(this.userInfo)
        }
      }
    })
  </script>
</body>
</html>